<template>
  <div class="xtx-cart-page">
    <div class="top">
      <h2>个人中心</h2>
      <div class="userInfo">
        <div class="left">
          <div class="img"></div>
          <h4>{{ userinfo.nickname }}</h4>
        </div>
        <div class="conten">
          <h5>用户名：{{ userinfo.username }}</h5>
          <h5>性别：{{ userinfo.sex }}</h5>
          <h5>所属地区：{{ userinfo.city }}</h5>
          <el-popover placement="right" width="300" v-model="visible">
            <h3>编辑个人信息</h3>
            <div style="text-align: right; margin: 10px">
              <div class="infolist">
                <!-- 编辑个人信息 -->
                <el-form
                  :model="ruleForm"
                  status-icon
                  ref="ruleForm"
                  :rules="rules"
                  label-width="80px"
                  label-position="left"
                  class="demo-ruleForm"
                >
                  <el-form-item label="昵称" prop="nickname">
                    <el-input type="text" v-model="ruleForm.nickname" :placeholder="userinfo.nickname"></el-input>
                  </el-form-item>
                  <el-form-item label="姓" prop="surname">
                    <el-input type="text" v-model="ruleForm.surname" :placeholder="userinfo.surname"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model.number="ruleForm.phone" :placeholder="userinfo.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="所在地" prop="city_name">
                    <div>
                      <CityList @updataname="updataname"></CityList>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="submit">确定</el-button>
            </div>
            <el-button slot="reference">编辑资料</el-button>
          </el-popover>
        </div>
        <div class="right">
          <h5>昵称：{{ userinfo.nickname }}</h5>
          <h5>电话：{{ userinfo.phone }}</h5>
          <h5>注册时间：{{ userinfo.register_time | data }}</h5>
          <el-popover placement="right" width="300" v-model="isvisible">
            <h3>修改密码</h3>
            <div style="text-align: right; margin: 10px">
              <div class="infolist">
                <!-- 修改密码 -->
                <el-form
                  :model="rulesForm"
                  status-icon
                  ref="form"
                  :rules="rules"
                  label-width="90px"
                  label-position="left"
                  class="demo-ruleForm"
                >
                  <el-form-item label="新密码" prop="pass">
                    <el-input type="password" v-model="rulesForm.pass"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="password">
                    <el-input type="password" v-model="rulesForm.password"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <el-button size="mini" type="text" @click="isvisible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="submitPass">确定</el-button>
            </div>
            <el-button slot="reference">修改密码</el-button>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="container">
      <CarInfo></CarInfo>
    </div>
  </div>
</template>
<script>
import CityList from '@/views/components/ascader.vue'
import { setUserInfo, getUserInfo, updataPass } from '@/api/user'
import CarInfo from './components/CarInfo.vue'
export default {
  name: 'XtxCartPage',
  components: {
    CarInfo,
    CityList
  },
  data() {
    // 此处自定义校验手机号码js逻辑
    const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('号码不能为空!!'))
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          callback(new Error('请输入正确手机号'))
        } else {
          callback()
        }
      }, 1000)
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.rulesForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      city: '',
      isvisible: false,
      visible: false,
      ruleForm: {
        nickname: '',
        sex: '',
        surname: '',
        phone: '',
        city_name: ''
      },
      rulesForm: {
        pass: '',
        password: ''
      },
      rules: {
        pass: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatePass2, trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        sex: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [{ type: 'number', required: true, validator: validatePhone, trigger: 'blur' }],
        surname: [
          { required: true, message: '请输入姓氏', trigger: 'blur' },
          { min: 1, max: 2, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        city_name: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  computed: {
    userinfo: function () {
      return this.$store.state.user.profile
    }
  },
  methods: {
    updataname(name) {
      this.ruleForm.city_name = name
    },
    submitPass() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await updataPass({ password: this.rulesForm.password })
          console.log(res)
          if (res.data.statu == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.isvisible = false
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          }
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
          return false
        }
      })
    },
    submit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await setUserInfo(this.ruleForm)
          if (res.data.statu == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.visible = false
            const data = await getUserInfo()
            this.$store.commit('user/setUseInfo', data.data.data)
          }
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
          return false
        }
      })
    }
  },
  filters: {
    data: value => {
      const year = new Date(value).getFullYear()
      let month = new Date(value).getMonth() + 1
      let date = new Date(value).getDate()
      date = date < 10 ? '0' + date : date
      month = month < 10 ? '0' + month : month
      return year + '-' + month + '-' + date
    }
  }
}
</script>
<style scoped lang="less">
/deep/.cascader {
  padding: 0;
  left: 0;
  span {
    padding: 0 30px 0 10px;
  }
}
.container {
  margin-top: 25px;
  min-height: 200px;
  background-color: #fff;
}
.top {
  background-color: #fff;
  h2 {
    padding: 20px 0 0 20px;
  }
  .userInfo {
    padding: 0 20px 20px 20px;
    display: flex;
    color: #666;
    .img {
      width: 150px;
      height: 150px;
      background: #666 url('@/assets/logo.png') no-repeat 0 / contain;
      border-radius: 50%;
    }
    h4 {
      text-align: center;
    }
    .conten {
      width: 400px;
      padding-left: 100px;
    }
    .right {
      width: 200px;
    }
  }
}
.input {
  border: 1px solid #ccc;
  width: 70%;
  height: 32px;
  line-height: 32px;
  margin-top: 10px;
}
.error {
  color: red;
  font-size: 12px;
}
.tfoot {
  height: 200px;
  width: 100%;
  text-align: center;
  color: rgb(168, 167, 167);
  .iconfont {
    font-size: 80px;
    margin: 0;
  }
  h2 {
    font-weight: normal;
  }
}
.containerCart {
  background: #fff;
  color: #666;
  font-size: 16px;
  padding: 30px;
  .button_auto {
    width: 60px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    border: 1px solid #e26237;
    background: #e26237;
  }
  .select {
    height: 32px;
    width: 200px;
    border: 1px solid #ccc;
  }
  .icon-shanchu {
    font-size: 25px;
    display: none;
    transform: translate(-50%, -50%);
  }
  .inputImg {
    background-size: cover;
    height: 200px;
    width: 200px;
  }
  .iconfont {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .icon-jiahao1 {
    transform: translate(-50%, -50%);
    font-size: 50px;
  }
  .normalImgUploadWrapper {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #ccc;
    :hover {
      cursor: pointer;
    }
  }
  .normalImgUploadWrapper:hover .icon-shanchu {
    display: block;
  }
  .inputTextValue {
    border: 1px solid #ccc;
    width: 70%;
    height: 32px;
    margin-top: 10px;
  }
  .normalServiceDesc {
    resize: none;
    border: 1px solid #ccc;
  }
}
.hover {
  background-color: #fcee73;
}
.lianxi {
  display: block;
  width: 80px;
  height: 32px;
  border: 1px solid #dd6d44;
  border-radius: 5px;
}
.tc {
  text-align: center;
  .xtx-numbox {
    margin: 0 auto;
    width: 120px;
  }
}
.f16 {
  font-size: 16px;
  line-height: 32px;
}
.goods {
  display: flex;
  align-items: center;
  img {
    width: 100px;
    height: 100px;
  }
  > div {
    width: 280px;
    font-size: 16px;
    padding-left: 10px;
    .attr {
      font-size: 14px;
      color: #999;
    }
  }
}
.action {
  display: flex;
  background: #fff;
  margin-top: 20px;
  height: 80px;
  align-items: center;
  font-size: 16px;
  justify-content: space-between;
  padding: 0 30px;
  .xtx-checkbox {
    color: #999;
  }
  .batch {
    a {
      margin-left: 20px;
    }
  }
  .red {
    font-size: 18px;
    margin-right: 20px;
    font-weight: bold;
  }
}
.tit {
  color: #666;
  font-size: 16px;
  font-weight: normal;
  line-height: 50px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.xtx-cart-page {
  .user {
    display: flex;
    height: 120px;
    margin-top: 20px;
    background-color: #fff;
    .img {
      height: 80px;
      margin: 20px;
    }
    .left {
      height: 80px;
      margin: 20px;
      .pan {
        display: block;
      }
    }
    .right {
      display: flex;
      justify-content: space-around;
      height: 80px;
      width: 100%;
      margin: 20px;
      div {
        flex: 1;
      }
      i {
        text-align: center;
        display: block;
        font-size: 22px;
        margin-right: 2px;
      }
      .pan {
        text-align: center;
        display: block;
        margin: 20px;
      }
    }
  }
  .cart {
    background: #fff;
    color: #666;
    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;
      th,
      td {
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;
        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }
      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }
}
</style>
